<template>
<el-dialog :visible.sync="dialogVisible" width="30%" @close="closeDialog">
    <el-steps :space="200" :active="step" finish-status="success" align-center="" status="success">
        <el-step v-for="each in stepList" :title="each.title" :key="each.id"></el-step>
    </el-steps>
</el-dialog>
</template>

<script>
export default {
    name: 'AbsenceSteps',
    props: {
        isShow: Boolean,
        stepData: Object
    },
    data() {
        return {
            dialogVisible: false,
            stepList: [],
            step: 0
        }
    },
    methods: {
        closeDialog() {
            this.stepList = []
            step = 0
            this.dialogVisible = false
        }
    },
    watch: {
        isShow() {
            let roleids = localStorage.getItem('roleid')
            let roleid = roleids.substring(0, 1)
            let stage = this.stepData.stage
            let id = 1

            this.stepList.push({
                id: id,
                title: '未提交'
            })
            id = id + 1

            if (roleid == '3') {
                this.stepList.push({
                    id: id,
                    title: '总经理审核'
                })
                id = id + 1
            } else {
                this.stepList.push({
                    id: id,
                    title: '部门经理审核'
                })
                id = id + 1

                if (this.stepData.planDays > 5) {
                    this.stepList.push({
                        id: id,
                        title: '总经理审核'
                    })
                    id = id + 1
                }
            }
            this.stepList.push({
                id: id,
                title: '待销假'
            })
            id = id + 1

            this.stepList.push({
                id: id,
                title: '销假完成'
            })

            if (roleid == '4') {
                debugger
                if (this.stepData.planDays <= 5) {
                    if (stage < 2) {
                        this.step = stage
                    } else {
                        if (this.stepData.realDays != 0) {
                            this.step = 4
                        } else {
                            this.step = 2
                        }
                    }
                } else {
                    if (this.stepData.realDays != 0) {
                        this.step = 5
                    } else {
                        this.step = stage
                    }
                }
            } else {
                if (stage < 2) {
                    this.step = stage
                } else if (this.stepData.realDays != 0) {
                    this.step = 4
                } else {
                    this.step = 2
                }
            }

            this.dialogVisible = true
        }
    }
}
</script>

<style>

</style>
